import moment    from 'moment'
import Mapwindow from './Mapwindow'
import sjimg   from './images/info_red.png'
import dsimg   from './images/info_yellow.png'
import stopimg from './images/info_car_stop.png'
import './styles/Mapcar.less'

class Mapalarm {

	marker = null
	icons = [sjimg,dsimg,stopimg]
	imgsize = [[16,16],[16,16],[17,17]]
	isOpenWindow = false

	constructor({map,gps,info = {},isWindow=true}){
		this.map = map;
		this.gps = gps;
		this.info = info;
		this.isWindow = isWindow;
		debugger;
		if(this.gps&&this.gps.lng){
			this._checkStatus();
			this._init();
			this._initWindow();
		}
	}

	_checkStatus(){
		this.type = 0;

		this.info.size = this.imgsize[this.type];
		this.info.icon = this.icons[this.type];
	}

	_init(){
		this.marker = new AMap.Marker({
        map: this.map,
        position: [this.gps.lng, this.gps.lat],
        icon:new AMap.Icon({image:this.info.icon,imageSize:new AMap.Size(this.info.size[0],this.info.size[1]),size:new AMap.Size(this.info.size[0],this.info.size[1])}),
        offset: new AMap.Pixel(-this.info.size[0]/2,-this.info.size[1]/2),
        angle:this.gps.direction
    });
    
	}

	_initWindow(){
		if(this.isWindow){
    	this.infowindow = new Mapwindow({map:this.map,position:this.marker.getPosition(),isShow:false,zIndex:200});
    	let div = this._createInfoDiv();
    	this.infowindow.setHtml(div);
    	this.marker.on('click',()=>{
    		if(this.isOpenWindow){
    			this.infowindow.hide();
    			this.isOpenWindow = false;
    		}else{
    			this.infowindow.show();
    			this.isOpenWindow = true;
    		}
    	})
    }
	}

	_createInfoDiv(){
		let div = document.createElement('div');
		this.info;
		div.innerHTML = `
			<div class="car-info">
				<div class="title">
					<span>${this.info.plateNumber}</span>
					<span>${this.info.driverName}</span>
				</div>
				<div class="car-info-main">
					<ul>
						<li><label >告警</label><span>${this.info.alarmTypeName}</span></li>
						<li><label >大概地点</label><span>${this.info.address}</span></li>
						<li><label >定位时间</label><span>${moment(this.info.generateTime).format('YYYY-MM-DD HH:mm:ss')}</span></li>
					</ul>
				</div>
			</div>`
		return div;
	}

	setWindow(html){
		this.infowindow.setHtml(html);
	}
	
}
export default Mapalarm;